<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .pc_parent {
        display: grid;
        grid-template-columns: repeat(4, 284px);
        grid-template-rows: repeat(2, 272px);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
    .pc_parent>div{
        border: 1px solid black;
    }
    .pc_parent div div{
        text-align: center;
    }
    .pc_parent img {
        width: 230px;
        height: 220px;
        display: block;
        margin: 0 auto;
    }
    .pc_div1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    .pc_div2 {
        grid-area: 2 / 1 / 3 / 2;
    }

    .pc_div3 {
        grid-area: 1 / 2 / 2 / 3;
    }

    .pc_div4 {
        grid-area: 2 / 2 / 3 / 3;
    }

    .pc_div5 {
        grid-area: 1 / 3 / 2 / 4;
    }

    .pc_div6 {
        grid-area: 2 / 3 / 3 / 4;
    }

    .pc_div7 {
        grid-area: 1 / 4 / 2 / 5;
    }

    .pc_div8 {
        grid-area: 2 / 4 / 3 / 5;
    }
</style>

<body>
    <div class="pc_parent">
        <div class="pc_div1">
            <img src="./img/96_ba8i.png" alt=""><div>职业夹克装</div>
        </div>
        <div class="pc_div2"><img src="./img/86_mcj8.png" alt=""><div>鳄鱼纹宠物项圈</div></div>
        <div class="pc_div3"><img src="./img/88_qo13.png" alt=""><div>金属镶钻宠物项圈</div></div>
        <div class="pc_div4"><img src="./img/87_kefk.png" alt=""><div>泡棉拉宠物胸背带</div></div>
        <div class="pc_div5"><img src="./img/89_9k3a.png" alt=""><div>玫红色狗狗项圈</div></div>
        <div class="pc_div6"><img src="./img/90_fsq6.png" alt=""><div>金属镶钻宠物项圈</div></div>
        <div class="pc_div7"><img src="./img/91_bfvn.png" alt=""><div>涤纶反光牵引胸背带</div></div>
        <div class="pc_div8"><img src="./img/92_72g1.png" alt=""><div>皮质牵引套装</div></div>
    </div>
</body>

</html>